<!-- 滑动切换选项卡+吸顶演示(上一个tab数据不保留，滚动流畅) -->
<template>
	<view class="content">
		<z-paging 
			ref="pagePaging" 
			refresher-only 
			@onRefresh="onRefresh" 
			@scrolltolower="scrolltolower"
			:refresher-enabled="false"
			>
			<!-- 自定义下拉刷新view -->
			<template #refresher="{refresherStatus}">
				<custom-refresher :status="refresherStatus" />
			</template>
			<!-- tab上面部分 -->
			<view class="banner-view" style="calc(var(--status-bar-height) + 88rpx + 420rpx)">
				<view class="nav-bar"></view>
				<view class="search">
					<input @focus="searchFocus" type="text" placeholder="请输入搜索内容">
					<image src="../../static/fashionPurchase/brand.svg" @click="toAllAttention"/>
					<image src="../../static/fashionPurchase/like.svg" @click="toCollect" />
				</view>
				<view class="bg">
					<view class="bg-color">
						<image src="../../static/fashionPurchase/bg-red.svg"/>
						<view>
							<view class="bg-title">
								<view>
									<image src="../../static/fashionPurchase/brandfest-icon.svg" mode="" />
									<image src="../../static/fashionPurchase/brandfest.svg" mode="" />
								</view>
								<image src="../../static/fashionPurchase/icon_you.svg" mode="" @click="toClassify(1)"/>
							</view>
							<view class="bg-bottom">
								<view class="item" v-for="item in dataist.hotList" :key="item.id" @click="toBrandFest(item.id)">
									<image :src="item.coverPic"/>
									<text>{{item.name}}</text>
								</view>
								
							</view>
						</view>
					</view>
					<view class="bg-color">
						<image src="../../static/fashionPurchase/bg-blue.png"/>
						<view>
							<view class="bg-title">
								<view>
									<image src="../../static/fashionPurchase/chaodou.svg" mode="" />
									<image src="../../static/fashionPurchase/conversion.svg" mode="" />
								</view>
								<!-- <image src="../../static/fashionPurchase/icon_you.svg" mode="" /> -->
							</view>
							<view class="bg-bottom bg-bottom-right">
								<image src="../../static/fashionPurchase/placeholder.png"/>
								<!-- <image src="../../static/fashionPurchase/bg-left.svg" /> -->
								<view class="bg-num">
									<image src="../../static/fashionPurchase/chaodou.svg" mode="" />
									<text>1000潮豆</text>
								</view>
								<view class="bg-imgs">
									<image src="https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/8c3a59795fe5b08fe588abe887b4gc62301000000?t=1722825441307"/>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
				<!-- <view style="z-index: 100;position: sticky;top: var(--status-bar-height);"> -->
				<view style="z-index: 100;">
					<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
					<z-tabs 
						ref="tabs" 
						:current="current" 
						:list="tabList" 
						@change="tabsChange" 
						:barWidth="'26rpx'" 
						:activeColor="'#16DFF2'" 
						:activeStyle="activeStyle"
						:inactiveStyle="inactiveStyle"
					>
						<!-- <template #z-tabs-item > -->
							<!-- 插槽 -->
							<view class="z-tabs-item" style="flex-shrink:0" @click="toClassify(2)">
								<image src="../../static/fashionPurchase/classify.svg" />
								<text>分类</text>
							</view>
						<!-- </template> -->
					</z-tabs>
				</view>
				<swiper class="swiper" :style="[{height:swiperHeight+'px'}]" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
					<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
						<swiperListItem :ref="el => swiperItems[index] = el" :tabIndex="index" :currentIndex="current" :typeId="item.id" @heightChanged="heightChanged">
						</swiperListItem>
					</swiper-item>
				</swiper>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import { ref,reactive,onMounted } from 'vue';
	import request from '/http/request.js';
	import swiperListItem from './swiperListItem.vue'
	import {typeDetail} from '@/api/shop.js'
	import {hotBrandList} from '@/api/brand.js'
	
	const swiperItems = ref([]);
	const tabs = ref(null);
	const pagePaging = ref(null);
		
  const swiperHeight = ref(0);
	let tabIndex = ref(0);
	// const tabList = ref(['推荐','奢包','腕表','首饰','潮服','潮鞋']);
	const tabList = ref([]);
	let current = ref(0);
	const dataist = reactive({
		hotList:[]
	})

	const activeStyle = reactive({
    color: '#111111',
    fontSize: '28rpx',
    fontWeight: 500
  })
  const inactiveStyle = reactive({
    color: '#333333',
    fontSize: '28rpx',
    fontWeight: 400
  })

	onMounted(() => {
		getTabList()
		getHotBrand()
	})

	const getTabList = async () => {
		let res = await typeDetail()
		console.log('分类tabList',res)
		tabList.value = res
		console.log('tabList.value',tabList.value)
	}

	const getHotBrand = async () => {
		let res = await hotBrandList()
		console.log('热销品牌',res)
		dataist.hotList = res.slice(0,6)
		// console.log('tabList.value',tabList.value)
	}

	
	// tabs通知swiper切换
	const tabsChange = (index) => {
		_setCurrent(index);
	}
	
	// 下拉刷新时，通知当前显示的列表进行reload操作
	const onRefresh = () => {
		swiperItems.value[current.value].reload(() => {
			// 当当前显示的列表刷新结束，结束当前页面的刷新状态
			pagePaging.value.complete([]);
		});
	}
	
	// 当滚动到底部时，通知当前显示的列表加载更多
	const scrolltolower = () => {
		swiperItems.value[current.value].doLoadMore();
	}
	
	// swiper滑动中
	const swiperTransition = (e) => {
		tabs.value.setDx(e.detail.dx);
	}
	
	// swiper滑动结束
	const swiperAnimationfinish = (e) => {
		_setCurrent(e.detail.current);
		tabs.value.unlockDx();
	}
	
	// 设置swiper的高度
	const heightChanged = (height) => {
		if(height === 0){
			// 默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
			// 注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
			height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
		}
		swiperHeight.value = height;
	}
	
	const _setCurrent = (tempCurrent) => {
		if (tempCurrent !== current.value){
			// 切换tab时，将上一个tab的数据清空
			swiperItems.value[current.value].clear();
		}
		current.value = tempCurrent;
	}

	const toClassify = (type) => {
		console.log('跳转到分类页面或者全部品牌')
		uni.navigateTo({
			url:'/pages/allBrands/index?type=' + type
		})
	}
	
	//跳转心愿单
  const toCollect = () => {
    uni.navigateTo({
      url: '/pages/collect/index'
    })
  }

	const toAllAttention = () => {
		uni.navigateTo({
      url: '/pages/allAttention/index'
    })
	}
	
	const toBrandFest = (id) => {
		uni.navigateTo({
      url: '/pages/brandFest/index?id=' + id
    })
	}

	const searchFocus = (id) => {
		uni.navigateTo({
      url: '/pages/recommendSearch/index'
    })
	}
	

</script>

<style lang="scss" scoped>
	.content{
    // background-color: #6e4ece;
	}
	.banner-view {
		// background-color: #007AFF;
		// color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	::v-deep .z-paging-content-fixed{
    background-color: #F4F3F7 !important;
	}

	.paging-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: pink;
	}

	::v-deep .z-tabs-conatiner{
		height: 76rpx;
		background-color: #F4F3F7 !important;
		flex: 1 !important;
	}

	::v-deep .zp-swiper-super{
		background-color: #F4F3F7;
	}

	::v-deep .z-tabs-list{
		flex: 1 !important;
		padding: 0 15rpx;
	}

	::v-deep .z-tabs-item{
		flex: 1 !important;
		padding: 0 5rpx !important;
	}

	::v-deep .z-tabs-bottom {
		bottom: 10rpx !important;
	}

	.z-tabs-item{
		// flex-shrink: 0;
		// flex: 1;
		// @include flex(row,flex-start);
		width: 100rpx;
		flex: 1.5 !important;

		@include flex(row);
		>image{
			width: 24rpx;
			height: 24rpx;
			margin-right: 4rpx;
		}
		>text{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #1E2222;
		}
	}

	.swiper {
		height: 1000px;
	}

	.nav-bar{
		width: 100%;
    height: var(--status-bar-height);
		background-color: #F4F3F7;
		// position: fixed;
		// top: 0;
		// left: 0;
		// z-index: 10;
	}

	.search{
		width: 690rpx;
		height: 88rpx;
		margin: auto;
		// padding-top: var(--status-bar-height);
		@include flex(row,space-between);

		input{
			width: 514rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			line-height: 72rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
		}
		image{
			width: 44rpx;
			height: 44rpx;
		}
	}
    
	.bg{
		width: 690rpx;
		height: 368rpx;
		margin: auto;
		padding-top: 32rpx;
		padding-bottom: 20rpx;
		@include flex(row,space-between);

		.bg-color{
			width: 336rpx;
			height: 368rpx;
			position: relative;

			>image{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
			>view{
				width: 100%;
				height: 100%;
				.bg-title{
					height: 78rpx;
					// line-height: 78rpx;
					padding: 0 10rpx;
					box-sizing: border-box;
					@include flex(row,space-between);

					>view{
						@include flex();
						>image:nth-of-type(1){
							width: 32rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}
						>image:nth-of-type(2){
							width: 98rpx;
							height: 32rpx;
						}
					}

					>image{
						width: 20rpx;
						height: 20rpx;
					}

				}

				.bg-bottom{
					width: 315rpx;
					height: 280rpx;
					margin: auto;
					background: #FFFFFF;
					border-radius: 8rpx;
					padding: 16rpx 0;
					box-sizing: border-box;
					position: relative;
					@include flex(row,space-between,flex-start,wrap);

					.item{
						width: 105rpx;
						height: 116rpx;
						// background-color: pink;
						@include flex(column,space-between,center,wrap);

						>image{
							width: 72rpx;
							height: 72rpx;
							border: 2rpx solid #FE475B;
							border-radius: 36rpx;
						}
						>text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #333333;
						}
					}

					>image:nth-of-type(1){
						width: 100%;
						height: 100%;
					}
					// >image:nth-of-type(2){
					// 	width: 72rpx;
					// 	height: 20rpx;
					// 	position: absolute;
					// 	bottom: 0rpx;
					// 	left: 0rpx;
					// 	z-index: 5;
					// }
					>.bg-num{
						position: absolute;
						bottom: 0;
						left: 0;
						@include flex();
						image{
							width: 24rpx;
							height: 24rpx;
						}
						text{
							font-weight: 500;
							font-size: 24rpx;
							color: #333333;
						}
					}
					>.bg-imgs{
						width: 160rpx;
						height: 160rpx;
						position: absolute;
						top: 15rpx;
						left: 77rpx;
						border-radius: 5rpx;
						>image{
							width: 160rpx;
							height: 160rpx;
							border-radius: 5rpx;
						}
					}
				}

				.bg-bottom-right{
					padding: 0;
				}
			}
		}
	}


</style>
